<template>
	<view class="relative">
		<uv-tabs
		:list="list" 
		lineHeight="0"
		:itemStyle="{padding: 0}"
		:inactiveStyle="{
			backgroundColor: '#F2F2F2',
			padding: '15rpx 60rpx',
			marginRight: '30rpx',
			color: '#404040',
			borderRadius: '6rpx'
		}"
		:activeStyle="{
			backgroundColor: '#6642EA',
			padding: '15rpx 60rpx',
			color: '#fff',
			marginRight: '30rpx',
			borderRadius: '6rpx'
		}"
		>
				<template v-slot:right>
					<view style="padding-left: 4px;" @tap="toast">
						<uv-icon name="list" size="21" bold></uv-icon>
					</view>
				</template>
			</uv-tabs>
			
			<view class="card absolute" :style="{height: menu ? '500rpx' : 0, padding: menu ? '30rpx 25rpx 0' : 0}">
				<view class="card_title mb-20">全部分类</view>
				<view class="msg d-flex">
					<view class="msg_item" v-for="(item, index) of list" :key="index">
						<text>{{ item.name }}</text>
					</view>
				</view>
			</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue'

const list = reactive([{
					name: '分析指数',
				}, {
					name: '报告概况',
				}, {
					name: '基本信息'
				}, {
					name: '借贷压力分析'
				}, {
					name: '多头借贷分析'
				}, {
					name: '异常名单'
				}, {
					name: '关联案件扫描'
				}, {
					name: '失信案件扫描'
				}, {
					name: '执行案件扫描'
				}, {
					name: '限制高消费信息'
				}, {
					name: '网络社交异常检测'
				}])
				
				const menu = ref(false);
				
const toast = () => {
				menu.value = !menu.value
			}
</script>

<style lang="scss" scoped>
.uv-tabs {
	background-color: #fff;
	padding: 10rpx 25rpx;
	
	.uv-icon {
		position: relative;
		z-index: 8;
	}
}

.card {
	z-index: 4;
	background-color: #fff;
	width: 100%;
	transition: .3s;
	overflow: hidden;
	top: 0;
	
	&_title {
		font: {
			size: 27rpx;
			weight: bold;
		}
	}
	
	.msg {
		flex-wrap: wrap;
		&_item {
			margin-bottom: 30rpx;
			padding: 15rpx 25rpx;
			background-color: #F2F2F2;
			color: #333333;
			border-radius: 6rpx;
			font: {
				size: 26rpx
			}
			margin-right: 25rpx;
		}
	}
}
</style>
